<template>
  <div class="wrapper">
    <span class="title">{{title}}</span>
    <ul class="address">
      <li>{{province}}</li>
      <li>{{city}}</li>
      <li>{{county}}</li>
      <li v-if="town">{{town}}</li>
      <li v-if="village">{{village}}</li>
      <li>{{detail}}</li>
      <li>{{postal}}</li>
      <li>{{phone}}</li>
      <li>{{name}}</li>
    </ul>
    <el-button class="btn" type="text" @click="handEdit">编辑</el-button>
  </div>
</template>

<script>
export default {
  name: 'XumAddress',
  props: {
    id: {
      required: false,
      default: null
    },
    title: {
      required: true,
      type: String
    },
    province: {
      required: true,
      type: String
    },
    city: {
      required: true,
      type: String
    },
    county: {
      required: true,
      type: String
    },
    town: {
      required: false,
      default: '',
      type: String
    },
    village: {
      required: false,
      default: '',
      type: String
    },
    detail: {
      required: true,
      type: String
    },
    postal: {
      required: false,
      default: '000000',
      type: String
    },
    phone: {
      required: true,
      type: String
    },
    name: {
      required: true,
      type: String
    }
  },
  data () {
    return {

    }
  },
  methods: {
    handEdit () {
      this.$emit('edit', {
        id: this.id,
        title: this.title,
        province: this.province,
        city: this.city,
        county: this.county,
        town: this.town,
        village: this.village,
        detail: this.detail,
        postal: this.postal,
        phone: this.phone,
        name: this.name
      })
    }
  }
}
</script>

<style lang="scss" scoped>

  .wrapper{
    padding: 16px 4px;

    .title{
      display: block;
      font-weight: 700;
      margin-bottom: 24px;
      font-size: 16px;
      font-family: 'Roboto Condensed', sans-serif;
      color: #333333;
    }

    .address{
      list-style: none;

      li{
        padding-bottom: 9px;
        font-size: 16px;
        color: #777777;
        display: list-item;
        text-align: left;
      }

    }

    .btn{
      color: red;
      margin-top: 16px;
    }
  }

</style>
